<template>
  <div class="basic-from">
    <div class="planning-box">
      <div class="resource-manage">
        <div class="card-box">
          <div class="card-title">土地信息</div>
          <el-form
            ref="formConstructionLand"
            class="form-wrap"
            label-position="top"
            size="small"
            :model="formPlanning.landInfo"
            :rules="landInfo_rules"
          >
            <el-form-item label="宗地号" prop="parcelNum">
              <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="formPlanning.landInfo.parcelNum" @change="landCodeOnly" />
            </el-form-item>
            <el-form-item label="宗地面积(m²)" prop="parcelArea">
              <el-input v-halfCharCode maxlength="20" placeholder="请输入" v-model="formPlanning.landInfo.parcelArea" />
            </el-form-item>
            <el-form-item label="土地用途" prop="landUse">
              <el-input v-halfCharCode maxlength="100" placeholder="请输入" v-model="formPlanning.landInfo.landUse" />
              <!--              <el-select clearable placeholder="请选择" v-model="formPlanning.landInfo.landUse">-->
              <!--                <el-option v-for="item in landUses" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
              <!--              </el-select>-->
            </el-form-item>
            <el-form-item label="土地合同编号" prop="landContractNum">
              <el-input v-halfCharCode maxlength="100" placeholder="有，则填写合同号; 无，则不用填写" v-model="formPlanning.landInfo.landContractNum" />
            </el-form-item>
            <el-form-item label="地址" prop="cityCode" class="full">
              <el-row :gutter="10">
                <el-col :span="4">
                  <el-select clearable placeholder="请选择市" v-model="formPlanning.landInfo.cityCode">
                    <el-option v-for="item in cityAssembly" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="5">
                  <el-select clearable placeholder="请选择区" v-model="formPlanning.landInfo.countyCode" @change="handleChangeCountyCode">
                    <el-option
                      v-for="item in (this.formPlanning.landInfo.cityCode === '') ? [] : districtCollection"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="5">
                  <el-select clearable placeholder="请选择街道" v-model="formPlanning.landInfo.street" @change="handleChangeStreet">
                    <el-option
                      v-for="item in (this.formPlanning.landInfo.countyCode === '') ? [] : projectStreet.filter(_ => _.value.indexOf(formPlanning.landInfo.countyCode) != -1)"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="5">
                  <el-select clearable placeholder="请选择社区" v-model="formPlanning.landInfo.community" @change="handleChangeCommunity">
                    <el-option
                      v-for="item in (this.formPlanning.landInfo.street === '') ? [] : communityNameStreet"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="5">
                  <el-input
                    v-halfCharCode
                    maxlength="50"
                    placeholder="请输入道路及门牌号"
                    v-model="formPlanning.landInfo.addressInfo"
                    @change="handleValidateProject"
                  />
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </div>
        <div class="card-box">
          <div class="card-title">项目信息</div>
          <el-form ref="formConstruction" class="form-wrap" size="small" :model="formPlanning.propertyBasic" :rules="propertyBasic_rules">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-halfCharCode placeholder="请输入" v-model="formPlanning.propertyBasic.projectName" />
            </el-form-item>
            <el-form-item label="曾用名" prop="usedName">
              <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="formPlanning.usedName" />
            </el-form-item>
            <el-form-item label="管理权属" prop="manageUnit">
              <el-select clearable placeholder="请选择管理权属" v-model="formPlanning.propertyBasic.manageUnit">
                <el-option v-for="item in manageUnits" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="项目编号" prop="projectCode" v-if="isEdit">
              <el-input v-halfCharCode placeholder="请输入" readonly="readonly" v-model="formPlanning.propertyBasic.projectCode" />
            </el-form-item>
            <el-form-item label="项目国家编号" prop="projectCountryCode">
              <el-input
                v-halfCharCode
                maxlength="100"
                @change="validateProjectCountryCode"
                placeholder="请输入"
                v-model="formPlanning.propertyBasic.projectCountryCode"
              />
            </el-form-item>

            <!--<el-form-item label="项目面积(m²)" prop="projectArea">
              <el-input v-halfCharCode placeholder="请输入" v-model="formPlanning.propertyBasic.projectArea"/>
            </el-form-item>
            <el-form-item label="物业大类" prop="projectType">
              <el-select clearable placeholder="请选择" v-model="formPlanning.propertyBasic.projectType">
                <el-option v-for="item in projectType" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>-->

            <el-form-item label="项目来源" prop="isUpdate" v-if="addSource">
              <el-select clearable placeholder="请选择" v-model="formPlanning.propertyBasic.isUpdate">
                <el-option v-for="item in isUpdates" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开发单位">
              <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="formPlanning.propertyBasic.constructionUnit" />
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="formPlanning.propertyBasic.contactName" />
            </el-form-item>
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="formPlanning.propertyBasic.contactPhone" />
            </el-form-item>
            <!--<el-form-item label="当前阶段">
              <el-input v-halfCharCode maxlength="30" :readonly="true" placeholder="请输入" v-model="formPlanning.propertyBasic.stage"/>
            </el-form-item>-->
            <el-form-item label="地图坐标" prop="mapCoordinates" style="position: relative;">
              <el-button size="mini" type="primary" @click="$refs.positionDialog.show()" style="position: absolute;top: 0px;left: 70px;">选择</el-button>
              <el-button
                size="mini"
                v-if="formPlanning.propertyBasic.mapCoordinates"
                @click="$refs.positionDialog.show('preview')"
                style="position: absolute;top: 0px;left: 120px;"
              >查看</el-button>
              <el-input maxlength="30" v-model="formPlanning.propertyBasic.mapCoordinates" placeholder="请输入地图坐标" suffix-icon="el-icon-map-location" />
            </el-form-item>
            <el-form-item label="地图围栏" prop="fenceCoordinates" style="position: relative;">
              <el-button size="mini" type="primary" @click="$refs.positionDialog.show('pen')" style="position: absolute;top: 0px;left: 70px;">选择</el-button>
              <el-button
                size="mini"
                v-if="formPlanning.propertyBasic.fenceCoordinates"
                @click="$refs.positionDialog.show('pen-preview')"
                style="position: absolute;top: 0px;left: 120px;"
              >查看</el-button>
              <el-input
                maxlength="30"
                v-model="formPlanning.propertyBasic.fenceCoordinates"
                placeholder="请输入地图围栏"
                suffix-icon="el-icon-map-location"
              />
            </el-form-item>
            <el-form-item label="备注" class="full">
              <el-input v-halfCharCode maxlength="200" placeholder="请输入" v-model="formPlanning.propertyBasic.remarks" />
            </el-form-item>
          </el-form>
          <!-- 地图坐标选择弹窗 -->
          <positionDialog
            ref="positionDialog"
            :position="formPlanning.propertyBasic.mapCoordinates"
            :pen="formPlanning.propertyBasic.fenceCoordinates"
            @changeMessage="resetPosition"
          />
        </div>
        <div class="card-box">
          <div class="card-title">
            物业信息
            <el-button type="primary" style="mini" class="planning-button" @click="superInforAdd">添加</el-button>
          </div>
          <div class="table-planning">
            <el-table :data="formPlanning.supportingFacilities" style="width: 100%;">
              <el-table-column prop="propertyName" label="物业名称" width="120" />
              <el-table-column prop="projectType" label="物业大类" width="120">
                <template slot-scope="scope">
                  <span>{{getCardTypeValue(scope.row.projectType,propertyTypes)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="projectSubclassType" label="物业小类" width="120">
                <template slot-scope="scope">
                  <span>{{getCardTypeValue(scope.row.projectSubclassType, propertyUseTypes)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="floorSpace" label="占地面积(m²)" width="120" />
              <el-table-column prop="buildArea" label="建筑面积(m²)" width="120" />
              <el-table-column prop="transferMode" label="移交方式" width="120">
                <template slot-scope="scope">
                  <span>{{getCardTypeValue(scope.row.transferType, transferModeOption)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="remarks" label="备注" width="120">
                <template slot-scope="scope">
                  <span :title="scope.row.remarks">{{scope.row.remarks | ellipsis}}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClickEdit(scope)" type="text" size="small">编辑</el-button>
                  <el-button type="text" size="small" @click.native.prevent="handleClickDelete(scope.$index, formPlanning.supportingFacilities)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="card-box">
          <projectMilestones
            ref="milestones"
            @fileBusId="fileBusId"
            @isMaterialsName="isMaterialsName"
            :projectId="projectId"
            :milestonesList="formPlanning.projectMilestones"
          ></projectMilestones>
        </div>
        <div class="cFormFoot">
          <el-button type="primary" plain class="planning-button" v-if="!isAdd" v-throttle="[handleUpdate]">更新</el-button>
          <el-button type="primary" class="planning-button" v-if="isAdd" v-throttle="[handlePreservation]">保存</el-button>
        </div>
      </div>
    </div>
    <v-dialog title="新增物业信息" :show.sync="dialogVisible" class="dialogForm" width="1200px" v-if="dialogVisible">
      <div class="card-box">
        <div class="card-title">物业信息</div>
        <el-form ref="bulletInformation-form" class="form-wrap" :rules="bulletInformation_rules" :model="bulletInformation">
          <el-form-item label="楼栋名称" prop="buildingName">
            <el-input v-halfCharCode @change="autoSetPropertyName" maxlength="25" placeholder="请输入" v-model="bulletInformation.buildingName" />
          </el-form-item>
          <el-form-item label="所属楼层" prop="floorNum">
            <el-input v-halfCharCode @change="autoSetPropertyName" type="text" maxlength="5" placeholder="请输入所属楼层，最长不超过三位" v-model="bulletInformation.floorNum" />
          </el-form-item>

          <el-form-item label="物业名称" prop="propertyName">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="bulletInformation.propertyName" @change="propertyNameOnly" />
          </el-form-item>

          <el-form-item label="曾用名" prop="usedName">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="bulletInformation.usedName" />
          </el-form-item>


          <el-form-item label="层高(m)" prop="floorHeight">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="bulletInformation.floorHeight" />
          </el-form-item>
          <el-form-item label="净高(m)" prop="clearHeight">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="bulletInformation.clearHeight" />
          </el-form-item>
           <el-form-item label="楼板厚度(厘米)" prop="thickness">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="bulletInformation.thickness" />
          </el-form-item>
          <el-form-item label="承重(公斤/平米)" prop="loadBearing">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="bulletInformation.loadBearing" />
          </el-form-item>

          <el-form-item label="物业地址" prop="address" class="full">
            <el-input v-halfCharCode maxlength="50" placeholder="请输入" v-model="bulletInformation.address" />
          </el-form-item>
          <!--  <el-form-item label="初始类别" prop="initialType">
            <el-select clearable placeholder="请选择" v-model="bulletInformation.initialType">
              <el-option v-for="item in initialTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>-->
          <el-form-item label="物业大类" prop="projectType">
            <el-select clearable placeholder="请选择" @change="changeProjectType" v-model="bulletInformation.projectType">
              <el-option v-for="item in propertyTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物业小类" prop="projectSubclassType">
            <el-select clearable placeholder="请选择" @change="changeProjectSubclassType" v-model="bulletInformation.projectSubclassType">
              <el-option v-for="item in propertyUseTypesFilter" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="物业统计类别" prop="statisticType">
            <el-select clearable placeholder="请选择" v-model="bulletInformation.statisticType">
              <el-option v-for="item in statisticTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="物业细类" prop="projectSubdivide">
            <el-select clearable placeholder="请选择" v-model="bulletInformation.projectSubdivide">
              <el-option
                v-for="item in (bulletInformation.projectSubclassType == '')?[] : projectSubdivides.filter(_ => _.value.indexOf(bulletInformation.projectSubclassType) != -1)"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规划用途" prop="planUse">
            <!--            <el-input v-halfCharCode maxlength="100" placeholder="请输入规划用途" v-model="bulletInformation.planUse" />-->
            <el-select filterable clearable placeholder="请选择" v-model="bulletInformation.planUse">
              <el-option v-for="item in planUses" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="停车位数(个)" prop="parkingSpotNum" v-if="bulletInformation.planUse === '停车场'">
            <el-input v-halfCharCode maxlength="18" placeholder="仅在规划用途为停车场时填写" v-model="bulletInformation.parkingSpotNum" />
          </el-form-item>
          <el-form-item label="占地面积(m²)" prop="floorSpace">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="bulletInformation.floorSpace" />
          </el-form-item>
          <el-form-item label="建筑面积(m²)" prop="buildArea">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" @blur="handleUnitConstractionArea" v-model="bulletInformation.buildArea" />
          </el-form-item>
          <el-form-item label="套内面积(m²)" prop="insideArea">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" @blur="handleUnitConstractionArea" v-model="bulletInformation.insideArea" />
          </el-form-item>
          <el-form-item label="经营情况" prop="operation">
            <el-select clearable v-model="bulletInformation.operation" placeholder="请选择经营情况">
              <el-option v-for="item in operations" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="非经营面积(m²)" prop="unmanagedArea">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="bulletInformation.unmanagedArea" @blur="handleAreaCompared" />
          </el-form-item>
          <el-form-item label="经营面积(m²)" prop="managedArea">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="bulletInformation.managedArea" @blur="handleAreaCompared" />
          </el-form-item>
          <el-form-item label="分摊公用面积(m²)" prop="noApportionedArea">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="bulletInformation.noApportionedArea" @blur="handleNoAppor" />
          </el-form-item>

          <el-form-item label="公服数量" prop="facilityNumber">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="bulletInformation.facilityNumber" />
          </el-form-item>
          <el-form-item label="公服单位" prop="facilityUnit">
            <el-select clearable placeholder="请选择" v-model="bulletInformation.facilityUnit">
              <el-option v-for="item in facilityUnits" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公服层级" prop="facilityLevel">
            <el-select clearable placeholder="请选择" v-model="bulletInformation.facilityLevel">
              <el-option v-for="item in facilityLevels" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="覆盖半径(m)" prop="radius">
            <el-input v-halfCharCode maxlength="30" placeholder="请输入" v-model="bulletInformation.radius" />
          </el-form-item>

          <el-form-item label="移交方式" prop="transferType">
            <el-select clearable placeholder="请选择" v-model="bulletInformation.transferType">
              <el-option v-for="item in transferModeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="移交单位" prop="transferUnit">
            <el-input v-halfCharCode maxlength="25" placeholder="请输入" v-model="bulletInformation.transferUnit" />
          </el-form-item>
          <el-form-item label="移交日期" prop="receiveTime">
            <el-date-picker v-model="bulletInformation.receiveTime" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="备注" prop="remarks" class="full">
            <el-input v-halfCharCode maxlength="200" placeholder="请输入" v-model="bulletInformation.remarks" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="foot">
        <el-button size="small" class="dialog-button-right" @click="handleDialogClear">取消</el-button>
        <el-button size="small" class="dialog-button-left" type="primary" v-throttle="[handleDialogClick]">保存</el-button>
      </span>
    </v-dialog>
  </div>
</template>

<script src="./constructionEdit.js">

</script>

<style scoped lang="scss">
/deep/.el-table table {
  max-width: 100%;
}
.planning-box {
  .resource-manage {
    .card-box {
      margin: 24px;
      overflow: hidden;
      /deep/.el-table__header {
        max-width: 100% !important;
      }
      /deep/.el-table__body {
        max-width: 100% !important;
      }
      .projectAddrAsterisk {
        position: relative;
        padding-left: 10px;
      }
      .projectAddrAsterisk::after {
        content: "*";
        display: inline-block;
        color: #f66c6c;
        position: absolute;
        top: 9px;
        left: 0;
      }
      .planning-button {
        margin: 10px;
        float: right;
      }
      .material {
        padding: 20px;
        .fit {
          font-size: 22px;
          color: #999999;
          margin-top: 0;
        }
        .material-table {
          margin: 20px 0;
          position: relative;
        }
        .material-tabs {
          margin-top: 50px;
        }
      }
      /deep/ .el-table__empty-block {
        width: 100% !important;
      }
      /deep/ .el-table__empty-text {
        margin-left: auto;
        width: 100%;
      }
      //hxf-0909-里程碑样式-开始
      /deep/ .el-tabs__header {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
      }
      /deep/ .el-tabs__item {
        margin: 0 50px;
        .tabRadius {
          width: 50px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          border: 1px solid;
          border-radius: 50%;
          background-color: #fff;
        }
      }
      /deep/ .el-tabs__active-bar {
        height: 0;
        background-color: #fff;
      }
      /deep/ .el-tabs__nav-wrap::after {
        left: 50px;
        bottom: 50px;
        width: calc(100% - 120px);
      }
      //hxf-0909-里程碑样式-结束
    }
    .card-box:last-of-type {
      margin: 20px 0 0;
      padding-right: 20px;
    }
  }
}
</style>
